<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="./login.css">
    </link>
    <link rel="stylesheet" href="./buble.css">
    </link>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>

    <!-- 最外面的盒子 -->
    <div class="box">
        <!-- 文字盒子 -->
         <div class="pre">
            <h1>WELCOME</h1>
            <P>SIU!!!</P>

            <!-- 图片盒子 -->
             <div class="img-box">
                <img src="./img/waoku.jpg" alt="#">
             </div>
         </div>
         <!-- 注册盒子 -->
         <div class="register">
            <!-- 标题 -->
            <div class="title">
                <h2>注册</h2>
            </div>
            <!-- 输入框 -->
            <div class="input1">
                <input type="text" placeholder="用户名">
                <input type="text" placeholder="密码">
                <input type="text" placeholder="确认密码">
            </div>

            <!-- 按钮 -->
            <div class="btn">
                <button>注册</button>
                <p onclick="mySwitch()">已有账号?去登录</p>
            </div>

        </div>
        <!-- 登录盒子 -->
        <div class="login">
            <!-- 标题 -->
            <div class="title">
                <h2>登录</h2>
            </div>
            <!-- 输入框 -->
            <div class="input1">
                <input type="text" placeholder="用户名">
                <input type="text" placeholder="密码">
            </div>

            <!-- 按钮 -->
            <div class="btn">
                <button>登录</button>
                <p onclick="mySwitch()">没有账号?去注册</p>
            </div>
        </div>
       
    </div>

    <script>
        let flag=true;
        const mySwitch=()=>{
            if(flag){
                    // 获取到滑动盒子的dom元素并修改它移动的位置
                    $(".pre").css("transform","translateX(100%)")
                    // 获取到滑动盒子的dom元素并修改它的背景颜色
                    $(".pre").css("background-color","#c9e0ed")
                    //修改图片的路径
                    $("img").attr("src","./img/wuwu.jpeg")
                    
                }
                else {
                    $(".pre").css("transform","translateX(0%)")
                    $(".pre").css("background-color","#edd4dc")
                    $("img").attr("src","./img/waoku.jpg")
                }
                flag=!flag
        }
        
    </script>

<script>
    const bubleCreate=()=>{
        // 获取body元素
        const body = document.body
        // 创建泡泡元素
        const buble = document.createElement('span')
        // 设置泡泡半径
        let r = Math.random()*5 + 25 //半径大小为25~30
        // 设置泡泡的宽高
        buble.style.width=r+'px'
        buble.style.height=r+'px'
        // 设置泡泡的随机起点
        buble.style.left=Math.random()*innerWidth+'px'
        // 为body添加buble元素
        body.append(buble)
        // 4s清除一次泡泡
        setTimeout(()=>{
            buble.remove()
        },10000)
    }
    // 每200ms生成一个泡泡
    setInterval(() => {
        bubleCreate()
    }, 200);
</script>
</body>

</html>